body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, mediumpurple, #000);
}

.heart {
  width: 280px;
  height: 220px;
  display: flex;
  justify-content: space-between;
}
.heart span {
  width: 20px;
  border-radius: 10px;
  position: relative;
  background-color: plum;
  height: 50%;
  top: 25%;
  -webkit-animation: beating 1s infinite;
          animation: beating 1s infinite;
}
.heart span:nth-child(1), .heart span:nth-child(9) {
  background-color: lightcoral;
  height: 60px;
  top: 44px;
}
.heart span:nth-child(2), .heart span:nth-child(8) {
  background-color: lightskyblue;
  height: 120px;
  top: 12px;
}
.heart span:nth-child(3), .heart span:nth-child(7) {
  background-color: lightgreen;
  height: 160px;
  top: 0px;
}
.heart span:nth-child(4), .heart span:nth-child(6) {
  background-color: gold;
  height: 180px;
  top: 16px;
}
.heart span:nth-child(5) {
  background-color: plum;
  height: 188px;
  top: 32px;
}

@-webkit-keyframes beating {
  60%, 70% {
    background-color: plum;
    height: 50%;
    top: 25%;
    filter: blur(3px);
  }
}

@keyframes beating {
  60%, 70% {
    background-color: plum;
    height: 50%;
    top: 25%;
    filter: blur(3px);
  }
}/*# sourceMappingURL=index.css.map */